<template>
  <div class="container">
    <div class="header">
      <!-- 公司名称 -->
      <!-- <div style="">
      xxxx公司
    </div> -->
      <!-- 导航栏 -->
      <van-nav-bar title="请先登录吧~" />
    </div>
    <div class="form">
      <!-- 表单项 -->
      <van-cell-group inset style="margin-top: 50%">
        <!-- 输入订单号 -->
        <van-field v-model="orderNumber" label="订单号" placeholder="请输入订单号" label-width="30%" />
        <!-- 输入手机号 -->
        <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入手机号" label-width="30%" />
        <!-- 输入短信验证码 -->
        <van-field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码" label-width="30%">
          <template #button>
            <!-- 获取短信验证码按钮 -->
            <van-button size="small" type="primary" @click="sendSMS">{{ smsButtonText }}</van-button>
          </template>
        </van-field>
        
      </van-cell-group>
      <!-- 提示信息 -->
      <div v-if="showError" style="color: red; margin-top: 10px; font-size: 2vw;">
        {{ errorText }}
      </div>
      <!-- 登录按钮 -->
      <div style="margin: 30%;">
        <van-button round block type="primary" native-type="submit" style="width:150%; margin-left:-15%"
          @click="submitForm">
          登录
        </van-button>
      </div>
       
    </div>
  </div>
</template>
<script>
import store from '../store/index'

export default {
  data(){
    return{
      orderNumber:"",
      tel:"",
      telPattern:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      sms:"",
      smsButtonText: "发送验证码",
      showError: false, // 是否显示错误提示信息
      errorText: "" // 错误提示信息
    }

  },
  
  methods: {
    sendSMS() {
      // 发送短信验证码的逻辑
      // 暂无
      this.smsButtonText = "已发送";
    },
    submitForm() {
      if (!this.tel && !this.sms&& !this.orderNumber) {
        this.showError = true;
        this.errorText = "请输入订单号,手机号和验证码";
        return;
      }
      if (!this.orderNumber) {
        this.showError = true;
        this.errorText = "请输入订单号";
        return;
      }
      if (!this.tel) {
        this.showError = true;
        this.errorText = "请输入手机号";
        return;
      }
      if (!this.telPattern.test(this.tel)){
        this.showError = true;
        this.errorText = "请输入正确的手机号";
        return;
      }
      if (!this.sms) {
        this.showError = true;
        this.errorText = "请输入验证码";
        return;
      }
      if (this.tel.length!=11) {
        this.showError = true;
        this.errorText = "请输入正确的手机号";
        return;
      }
      //存储数据
      this.$store.commit('updateOrderNumber', this.orderNumber);
      this.$store.commit('updateTel', this.tel);
      // 执行登录操作，比如进行页面跳转
      alert("登录成功");
      this.$router.push('/visit')
    }

  }
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
}

.header {
  height: 70px;
  background-color: blue;
  color: white;
  text-align: center;
  line-height: 50px;
  width: 100%;
}

.form {
  margin-top: 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  margin-top: 120px;
}

.form-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}

.form-item label {
  width: 100px;
  text-align: right;
  margin-right: 20px;
}

.form-item input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-item input {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>